<template>
  <div class="message-item" :class="{ 'new-message': isNew }">
    <div class="message-time">{{ message.messageUpdateTime }}</div>
    <div class="items">
      <img :src="avatar" class="message-avatar"/>
      <div class="message-content">
        <p>{{ message.messageContent }}</p>
      </div>
    </div>


  </div>
</template>

<script>
export default {
  props: {
    message: Object,
    isNew: Boolean,
  },
  data() {
    return {
      avatar: require("@/assets/icons/png/avatar.png"),
    }
  }
};
</script>

<style>
.message-item {
  align-items: center;
  margin-bottom: 10px;
}

.items {
  display: flex;
}

.message-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
  margin-left: 20px;
  margin-top: 10px;
}

.message-content {
  flex: 1;
  margin-top: 10px;
  background-color: #e8e80b;
  border-radius: 3%;
  margin-right: 80px;
  text-align: left;
  border-top: 5px;
}

.message-time {
  color: gray;
  margin-top: 30px;
  //font-size: 1px
}
</style>

